<?php

/**
 * bing bing每日图模板
 *
 * @package custom
 */
ini_set('opcache.revalidate_freq', 0);
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$data = getBingToday();
$cate = array_reverse($data['month']);
?>
<!DOCTYPE HTML>
<html lang="zh-cn">

    <head><?php $this->need('header.php'); ?></head>

    <body class="bg-tran">
        <div class="container" style="padding:15px;">
            <div class="columns">
                <div class="column col-12">
                    <?php $this->content(); ?>
                </div>
                <div class="column col-12">
                    <div class="cfgDetails"></div>
                    <!-- <div class="d-flex" style="align-items: center;margin-bottom:20px;">
                        点击图片旁边的
                        <div class="-icon -setBkg -smaller -circle"></div>
                        图标可设置为背景
                    </div> -->
                    <span class="text-bold"><?php echo count($cate); ?></span>
                    个月搜集图片共<span class="text-bold"><?php echo $data['count']; ?></span>张，
                    <span>月份选择：</span>
                    <select id="monthSelector" onChange="changeCate(this.value)"></select>
                </div>
            </div>
            <div class="columns" id="datahere">loading...</div>
        </div>
        <script>
        (() => {
            const parent = window.parent.length
            if (parent === 0) location.href = '/'

            window.theme = getSystemTheme()
            document.body.setAttribute('data-theme', getSystemTheme());
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
                const newTheme = event.matches ? 'dark' : 'light';
                document.body.setAttribute('data-theme', newTheme);
            });

            dhtml()

            //渲染月份下拉
            const ser = document.querySelector('#monthSelector')
            const opts = JSON.parse(`<?php echo (json_encode($cate)); ?>`)

            let ym = getQueryParameter(location.href, 'ym')
            ym = ym ? ym : '<?php echo date('Ym'); ?>'

            for (let i = 0; i < opts.length; i++) {
                let y = opts[i].datestr.substring(0, 4)
                let m = opts[i].datestr.substring(4, 6)
                let d = opts[i].datestr.substring(6, 8)
                var newOption = document.createElement("option");
                newOption.value = y + '' + m
                newOption.text = `${y}年${m}月`
                if (ym === y + '' + m) {
                    newOption.selected = true
                }
                ser.add(newOption);
            }

            //是否有自定义背景设置
            bkgResetCheck()
        })()

        function bkgResetCheck() {
            let isSet = isSetBkg()
            const tar = document.querySelector('.cfgDetails')
            if (!tar) return
            let html;
            if (isSet === true) {
                //html = `发现你已经设置了固定的背景图片，<a href="javascript:;" onclick="removeBdk()">点这里继续使用最新的图片作为背景图片(每天更新)。</a>`
                html = `
                    <div class="form-group">
                    <label class="form-switch">
                        <input checked="true" onclick="removeBdk()" type="checkbox">
                        <i class="form-icon"></i> 自定义背景
                    </label>
                    </div>
                `
            } else {
                html = `
                    <div class="form-group">
                    <label class="form-switch">
                        <input disabled type="checkbox">
                        <i class="form-icon"></i> 自定义背景
                    </label>
                    </div>
                `
            }
            tar.innerHTML = html
        }

        function isSetBkg() {
            let cfg = localStorage.getItem('db_bkg')
            return !!cfg
        }

        function getSystemTheme() {
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                return 'dark';
            } else {
                return 'light';
            }
        }


        <?php
        $ym = isset($_GET['ym']) ? $_GET['ym'] : date('Ym');
        $mlist = getBingByMonth($ym);
        ?>

        function dhtml() {

            let data = `<?php echo json_encode($mlist); ?>`
            data = JSON.parse(data.replace(/'/g, '~'))
            //console.log(data)
            let ele = document.querySelector('#datahere')
            if (!ele) {
                throw ('no fount #datahere')
                return
            }
            let html = '';
            for (let i = 0; i < data.length; i++) {
                html += `<div class="column col-4 col-sm-12">
                    <div class="-bing-item">
                        <div class="bg-image bing-data-img" style="background-image:url('${data[i].urlstr}');"></div>
                        <div class="d-none text-tiny">${data[i].date_cn}</div>
                                            <div class="d-flex a-center text-bold text-ellipsis">
                                            <div class='mr-1 text-ellipsis'>${data[i].title}</div>
                                            <a class="tooltip tooltip-left" data-tooltip="查看详情" onclick="goBingPage(this)" href="javascript:;" data-desc="${data[i].copyright}" data-url="${data[i].copyrightlink}" data-title="${data[i].title}" data-date="${data[i].date_cn}">
                                                <div class="-icon -bing-info -smaller -circle"></div>
                                            </a>
                                            <a class="tooltip tooltip-left" data-tooltip="设置为背景" href="javascript:;" onclick="saveStorageBkg('${data[i].urlstr}')">
                                                <div class="-icon -setBkg -smaller -circle"></div>
                                            </a>
                                            </div>
                                            <div class="text-small text-ellipsis">${data[i].copyright}</div> 
                    </div>
                                    </div>`
            }
            if (html === "") {
                html = `<div class="column col-12">
                    <div class="text-center">
                        <div class="bg-image img-nodata col-mx-auto" style="width:60px;height:60px;"></div>
                        <div class="text-gray mt-2">暂无数据</div>
                    </div>
                    </div>`;
            }
            ele.innerHTML = html
        }

        function changeCate(ym) {
            location.href = '<?php echo $this->options->siteUrl . 'index.php/bing.html' ?>?ym=' + ym
        }

        function goBingPage(e) {
            const val = {
                title: e.dataset.title,
                url: e.dataset.url,
                data: e.dataset.date,
                desc: e.dataset.desc
            }
            window.parent.postMessage({
                act: 'viewBing',
                val: val
            }, '*');
        }

        function getQueryParameter(url, paramName) {
            const urlObj = new URL(url);
            const params = new URLSearchParams(urlObj.search);
            return params.get(paramName);
        }

        function saveStorageBkg(val) {
            localStorage.setItem('db_bkg', val)
            window.parent.postMessage({
                act: 'changeBkg',
                val: val
            }, '*');
            bkgResetCheck()
        }

        function removeBdk() {
            localStorage.removeItem('db_bkg')
            window.parent.postMessage({
                act: 'setDefaultBkg',
                val: null
            }, '*');
            bkgResetCheck()
        }
        </script>
    </body>

</html>